/**
 * Created by Administrator on 2017/3/27.
 */
var FormComponent = React.createClass({
   getInitialState:function () {
       return{username:"",
       gender:0,
       agree:true}
   } ,
    handleSubmit:function (e) {
        e.preventDefault();
        console.log(this.state);
    },
    handleChange:function (key,e) {
        //这种写法，属性不能为变量
        //this.setState({key:e.target.value});
            var obj = {};
        obj[key] = (key==="agree")?e.target.checked : e.target.value;

        this.setState(obj);
    },
    render:function () {
        return <form onSubmit={this.handleSubmit}>
            <label htmlFor="username">输入用户名</label>
            <input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this,"username")}></input>
            <label htmlFor="gender">选择性别</label>
            <select id="gender" value={this.state.gender} onChange={this.handleChange.bind(this,"gender")}>
                <option value="0">男</option>
                <option value="1">女</option>

            </select>
            <br/>
             <label htmlFor="agree">是否同意</label>
            <input id="agree" type="checkbox" checked={this.state.agree} onChange={this.handleChange.bind(this,"agree")}></input>
            <br/>
            <button type="submit">commit</button>
        </form>
    }

    
});


ReactDOM.render(<FormComponent></FormComponent>,document.body);